<template>
  <div>
    <a-modal
      title="详情"
      :visible="visible"
      :width="800"
      :confirmLoading="confirmLoading"
      @cancel="() => { $emit('cancel') }"
      @ok="() => { $emit('submit') }"
    >
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="表名称" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
              <a-input
                placeholder="表名称"
                v-decorator="[
                  'tableName',
                  {
                    rules: [{ required: true, message: '请输入名称!' }]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="包名" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
              <a-input
                placeholder="包名"
                v-decorator="[
                  'packageName',
                  {
                    rules: [{ required: true, message: '请输入名称!' }]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="作者" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
              <a-input
                placeholder="作者"
                v-decorator="[
                  'author',
                  {
                    rules: [{ required: true, message: '请输入用户名!' }]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="模块" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
              <a-input
                placeholder="模块"
                v-decorator="[
                  'moduleName',
                  {
                    rules: [{ required: true, message: '请输入密码!' }]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="表前缀" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
              <a-input
                placeholder="表前缀"
                v-decorator="[
                  'tablePrefix',
                  {
                    rules: [{ required: true, message: '请输入用户名!' }]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="注释" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
              <a-input
                placeholder="注释"
                v-decorator="[
                  'comments',
                  {
                    rules: [{ required: true, message: '请输入密码!' }]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="前端风格" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
              <a-input
                placeholder="前端风格"
                v-decorator="[
                  'style',
                  {
                    rules: [{ required: true, message: '请输入前端风格!' }]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24" style="text-align: center;">
            <a-button type="primary" @click="preView()">预览</a-button>
            <a-divider type="vertical" />
            <a-button type="primary" @click="code(row)">生成</a-button>
          </a-col>
        </a-row>
      </a-form>
      <div >
        <Preview
        ref="preview"
        :data="this.data"
        :visible="visible2"
        :confirmLoading="confirmLoading2"
        @cancel="handleCancel2"
        @submit="handleOk2"/>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { fetchPreview, fetchCode } from '@/api/gen-conf'
import Preview from './Preview'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    visible2: {
      type: Boolean,
      default: false
    },
    confirmLoading: {
      type: Boolean,
      default: false
    },
    confirmLoading2: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      labelCol: {
        xs: { span: 8 },
        sm: { span: 12 }
      },
      data: [],
      wrapperCol: {
        xs: { span: 8 },
        sm: { span: 12 }
      }
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'post_from2' })
  },
  components: { Preview },
  methods: {
    preView () {
      this.visible2 = true
      this.data = []
      this.form.validateFields((err, values) => {
       if (!err) {
         const promise = fetchPreview(values)
         promise.then(res => {
           console.log('fetchPreview ---res ' + res)
           debugger
           const map = res.data
           for (const key in map) {
             const k = key.replace(/^template\/|.vm$/g, '')
             const v = map[key]
             const obj = { k, v }
             this.data.push(obj)
             console.log('fetchPreview --- ' + this.data)
           }
         })
       }
      })
    },
      // fetchPreview(id).then(res => {
      //   this.refreshTable()
      // })
    code (id) {
    this.form.validateFields((err, values) => {
     if (!err) {
       const promise = fetchCode(values)
       promise.then(res => {
         console.log('fetchCode ---res ' + res)
       })
     }
    })
    },
    handleCancel2 () {
      debugger
      this.visible2 = false
    },
    handleOk2 () {
      debugger
      this.visible2 = false
    }
  }
}
</script>
